/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-03-19 10:30:33
 * @LastEditTime : 2023-07-18 13:45:00
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Configure\WeChatModule.jsx
 * @Description  :
 */

import { useRef, useEffect, useState } from 'react'
import { Button, message } from 'antd'
import { toMoney } from './Common'
import { WeChatImageUrl } from './WeChatCommon'
import { useRequest } from 'ahooks'
import { Http } from '../Api'
import { CaretDownOutlined } from '@ant-design/icons'
import { ICON } from './Icon'
import dayjs from 'dayjs'

const { uCharts } = window

// 同步小程序使用
export const SynchronizationExtra = () => {
    const { runAsync } = useRequest(Http, { manual: true })
    const uuid = 'd9b18d92-2f3d-41c8-a82a-0777bb90be80'
    const SynchronizationExtraData = () =>
        runAsync({
            url: 'posSaveJsonInfoByUuid',
            data: JSON.stringify(JSON.stringify(WeChatModuleExtra)),
            path: [uuid],
        }).then(() => message.success('小程序配置同步成功!'))
    return (
        <Button type="primary" onClick={SynchronizationExtraData}>
            同步配置数据
        </Button>
    )
}

export const WeChatModuleExtra = {
    OptionsButton001: {
        label: '下单按钮额外配置',
        children: [
            {
                uuid: '1',
                label: '巡检类型',
                value: 'module',
                type: 'select',
                options: [
                    { label: '安全巡检下单', value: 'safeOrder' },
                    { label: '质量巡检下单', value: 'massOrder' },
                ],
            },
        ],
    },
    OptionsSelect001: {
        label: '下拉参数',
        children: [
            {
                uuid: '1',
                label: '数据类型',
                value: 'module',
                type: 'select',
                options: [
                    { label: '标段选择', value: 'one' },
                    { label: '隧道选择', value: 'two' },
                    { label: '梁场选择', value: 'thr' },
                    { label: '环境选择', value: 'fou' },
                ],
            },
        ],
    },
    UChartsArcBar001: {
        label: '整改率进度选择',
        children: [
            {
                uuid: '1',
                label: '巡检类型',
                value: 'module',
                type: 'select',
                options: [
                    { label: '安全整改进度', value: 'safeOrder' },
                    { label: '质量整改进度', value: 'massOrder' },
                ],
            },
        ],
    },
    UChartsBar001: {
        label: '条形图内容选择',
        children: [
            {
                uuid: '1',
                label: '第一组名称',
                value: 'OneTitle',
                type: 'input',
            },
            {
                uuid: '2',
                label: '第一组颜色',
                value: 'OneColor',
                type: 'input',
            },
            {
                uuid: '8',
                label: '第二组',
                value: 'TwoState',
                type: 'switch',
            },
            {
                uuid: '3',
                label: '第二组名称',
                value: 'TwoTitle',
                type: 'input',
            },
            {
                uuid: '4',
                label: '第二组颜色',
                value: 'TwoColor',
                type: 'input',
            },
            {
                uuid: '5',
                label: '标题状态',
                value: 'showTitle',
                type: 'switch',
            },
            {
                uuid: '6',
                label: 'Y轴标题',
                value: 'TitleText',
                type: 'input',
            },
            {
                uuid: '7',
                label: '组织机构',
                value: 'OrgSelect',
                type: 'switch',
            },
            {
                uuid: 'api',
                label: '接口选择',
                value: 'apiUrl',
                type: 'select',
                options: [
                    { label: '安全整改进度', value: 'safeOrder' },
                    { label: '质量整改进度', value: 'massOrder' },
                    { label: '人员岗位统计', value: 'thr' },
                    { label: '监理工序', value: 'fou' },
                    { label: '试验室', value: 'fiv' },
                    { label: '形象进度', value: 'six' },
                    { label: '机械详情', value: 'sev' },
                    { label: '人员标段统计', value: 'A01' },
                ],
            },
            {
                uuid: '9',
                label: '条形图类型',
                value: 'BarType',
                type: 'select',
                options: [
                    { label: '堆叠条形图', value: 'stack' },
                    { label: '分组条形图', value: 'group' },
                ],
            },
        ],
    },
    UChartsRing001: {
        label: '数据类型',
        children: [
            {
                uuid: '1',
                label: '数据类型',
                value: 'module',
                type: 'select',
                options: [
                    { label: '人员管理', value: 'personnel' },
                    { label: '总投资', value: 'invest' },
                    { label: '预警信息', value: 'one' },
                ],
            },
        ],
    },
    UChartsRing002: {
        label: '数据类型',
        children: [
            {
                uuid: '1',
                label: '数据类型',
                value: 'module',
                type: 'select',
                options: [{ label: '预警信息', value: 'one' }],
            },
        ],
    },
    ImagesAndTexts001: {
        label: '数据类型',
        children: [
            {
                uuid: '1',
                label: '数据类型',
                value: 'module',
                type: 'select',
                options: [
                    { label: '通用数据', value: 'one' },
                    { label: '铁科数据', value: 'two' },
                ],
            },
        ],
    },
    ImagesAndTexts003: {
        label: '数据类型',
        children: [
            {
                uuid: '1',
                label: '数据类型',
                value: 'module',
                type: 'select',
                options: [
                    { label: '隧道概况', value: 'one' },
                    { label: '重点机械', value: 'two' },
                    { label: '隧道进度', value: 'thr' },
                ],
            },
        ],
    },
    ImagesAndTexts004: {
        label: '数据类型',
        children: [
            {
                uuid: '1',
                label: '数据类型',
                value: 'module',
                type: 'select',
                options: [
                    { label: '质量预警', value: 'one' },
                    { label: '党员统计', value: 'two' },
                ],
            },
        ],
    },
    ImagesAndTexts008: {
        label: '数据类型',
        children: [
            {
                uuid: '1',
                label: '数据类型',
                value: 'module',
                type: 'select',
                options: [
                    { label: '隧道气体', value: 'one' },
                    { label: '梁状态', value: 'two' },
                ],
            },
        ],
    },
    ImagesAndTexts010: {
        label: '文件柜',
        children: [
            {
                uuid: '1',
                label: '文件柜分类',
                value: 'module',
                type: 'treeSelect',
            },
        ],
    },
    ImagesAndTexts012: {
        label: '数据类型',
        children: [
            {
                uuid: '1',
                label: '数据类型',
                value: 'module',
                type: 'select',
                options: [
                    { label: '梁片需求', value: 'one' },
                    { label: '粱片种类', value: 'two' },
                ],
            },
        ],
    },
}

/**
 * ! ~@ 通用模块标题 ModuleTitle
 */
export const OptionsSelect = [
    { label: '隧道洞口', value: 'one' },
    { label: '时间选择', value: 'two' },
    { label: '安全巡检', value: 'thr' },
    { label: '质量巡检', value: 'fou' },
]

export const ModuleTitle001 = ({ data, back }) => {
    const { status, title, smallTitle, theme, option, options } = data
    const StyleArrList = {
        one: 'L-左洞',
        two: '2023/02/28',
        thr: '更多',
    }
    return (
        <>
            {status && (
                <div className="ModuleTitle001">
                    <div className="Label" style={{ background: theme ? back : '#a5aac1' }} />
                    <div className="Title">
                        <div>{title}</div>
                        <div>{smallTitle}</div>
                    </div>
                    {option && options && JSON.stringify(options) !== '{}' && (
                        <div className="Options">
                            <div className="OptionsBox">
                                <div style={options === 'thr' ? { color: '#888888' } : {}}>{StyleArrList[options]}</div>
                                {options !== 'thr' && <CaretDownOutlined />}
                            </div>
                        </div>
                    )}
                </div>
            )}
        </>
    )
}

/**
 * !~@ OptionsButton    OptionsButton   带操作按钮的模块
 */
export const OptionsButton001 = ({ ModuleItemEvent, data }) => {
    const StyleArrList = {
        safeOrder: { title: '安全巡检下单', color: '#0F7AB5', url: 'safeOrder' },
        massOrder: { title: '质量巡检下单', color: '#43A095', url: 'massOrder' },
    }
    const module = data?.module
    const Style = StyleArrList[module]
    const title = Style?.title
    const color = Style?.color
    const url = Style?.url

    return (
        <div
            className="OptionsButton001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('OptionsButton001')
            }}
        >
            <div className="Box">
                <div style={{ color }}>{title || '巡检下单'}</div>
                <div>将巡检出现的质量问题进行下单处理</div>
            </div>
            <div
                className="Btn"
                onClick={() => {
                    console.log(url)
                }}
            >
                点击下单
            </div>
        </div>
    )
}

/**
 * !~@ OptionsSelect       下拉操作
 */
export const OptionsSelect001 = ({ ModuleItemEvent, data }) => {
    const StyleArrList = {
        one: { title: '全部标段' },
        two: { title: 'XXXX隧道' },
        thr: { title: 'A1梁场' },
        fou: { title: 'A1' },
    }
    return (
        <div
            className="OptionsSelect001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('OptionsSelect001')
            }}
        >
            <div>{StyleArrList[data?.module || 'one'].title}</div>
            <CaretDownOutlined />
        </div>
    )
}

/**
 * !~@ 图文类表     ImagesAndTexts
 */
export const ImagesAndTexts001 = ({ ModuleItemEvent, data }) => {
    console.log(data)
    const [StyleArrList] = useState({
        one: [
            {
                key: '1',
                img: 'ImagesAndTexts001.png',
                children: [
                    { uuid: '1', title: '总投资(万元)', value: toMoney(2344141), color: '#F0843A' },
                    { uuid: '2', title: '累计投资(万元)', value: toMoney(1876200), color: '#43A095' },
                ],
            },
            {
                key: '2',
                img: 'ImagesAndTexts002.png',
                children: [
                    { uuid: '3', title: '本年投资(万元)', value: toMoney(743582), color: '#0F7AB5' },
                    { uuid: '4', title: '本月投资(万元)', value: toMoney(44141), color: '#A570B4' },
                ],
            },
        ],
        two: [
            {
                key: '1',
                img: 'ImagesAndTexts001.png',
                children: [
                    { uuid: '1', title: '总投资(万元)', value: toMoney(2344141), color: '#F0843A' },
                    { uuid: '2', title: '累计投资(万元)', value: toMoney(1876200), color: '#43A095' },
                ],
            },
            {
                key: '2',
                img: 'ImagesAndTexts002.png',
                children: [
                    { uuid: '3', title: '年计划投资(万元)', value: toMoney(743582), color: '#0F7AB5' },
                    { uuid: '4', title: '年完成投资(万元)', value: toMoney(44141), color: '#A570B4' },
                ],
            },
        ],
    })

    return (
        <div
            className="ImagesAndTexts001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts001')
            }}
        >
            {StyleArrList[data?.module || 'one'].map(({ key, img, children }) => (
                <div className="Box" key={key}>
                    <img src={WeChatImageUrl + img} alt="" />
                    {children.map(({ uuid, title, value, color }) => (
                        <div className="Text" key={uuid}>
                            <div style={{ color }}>{value}</div>
                            <div>{title}</div>
                        </div>
                    ))}
                </div>
            ))}
        </div>
    )
}
export const ImagesAndTexts002 = ({ ModuleItemEvent }) => {
    const [DataOne] = useState([
        { uuid: '1', img: 'liangzongshuliang', title: '梁总数量', value: '818', unit: '片' },
        { uuid: '2', img: 'IconAZuobiaoyoushujubeifen3', title: '生产完成数', value: '818', unit: '片' },
    ])
    const [DataTwo] = useState([
        { uuid: '1', title: '梁场数量', value: '2', unit: '座' },
        { uuid: '2', title: '存梁区', value: '80', unit: '片' },
        { uuid: '3', title: '已安装', value: '80', unit: '片' },
        { uuid: '4', title: '完成率', value: '80', unit: '%' },
    ])

    return (
        <div
            className="ImagesAndTexts002"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts002')
            }}
        >
            <div className="One">
                {DataOne.map(({ uuid, img, title, value, unit }) => (
                    <div className="TextsOneBox" key={uuid}>
                        <div className="Icon">{ICON[img]}</div>
                        <div className="Text">
                            <div>{title}</div>
                            <div>
                                <span>{value}</span> {unit}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
            <div className="Two">
                {DataTwo.map(({ uuid, title, value, unit }) => (
                    <div className="TextsTwoBox" key={uuid}>
                        <div>{title}</div>
                        <div>
                            <span>{value}</span> {unit}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}
export const ImagesAndTexts003 = ({ ModuleItemEvent, data }) => {
    const [StyleArrList] = useState({
        one: [
            { uuid: '1', title: '隧道概况', label: '总长度(m)', value: '1134', label2: '完成长度(m)', value2: '86' },
            { uuid: '2', title: '丰林隧道', label: '总长度(m)', value: '1134', label2: '完成长度(m)', value2: '86' },
            { uuid: '3', title: '峰岩山隧道', label: '总长度(m)', value: '1134', label2: '完成长度(m)', value2: '86' },
            { uuid: '4', title: '苔青隧道', label: '总长度(m)', value: '1134', label2: '完成长度(m)', value2: '86' },
            { uuid: '5', title: '东升隧道', label: '总长度(m)', value: '1134', label2: '完成长度(m)', value2: '86' },
        ],
        two: [
            { uuid: '1', title: '平地机', label: '标配数量', value: '1134', label2: '进场数量 ', value2: '86' },
            { uuid: '2', title: '压路机', label: '标配数量', value: '1134', label2: '进场数量 ', value2: '86' },
        ],
        thr: [
            { uuid: '1', title: '峰岩山隧道', label: '总长度(m)', value: '1134', label2: '完成长度(m)', value2: '86' },
            { uuid: '2', title: 'L-左洞', label: '总长度(m)', value: '1134', label2: '完成长度(m)', value2: '86' },
            { uuid: '3', title: 'R-右洞', label: '总长度(m)', value: '1134', label2: '完成长度(m)', value2: '86' },
        ],
    })

    return (
        <div
            className="ImagesAndTexts003"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts003')
            }}
        >
            {StyleArrList[data?.module].map(({ uuid, title, label, value, label2, value2 }) => (
                <div className="Box" key={uuid}>
                    <div>{title}</div>
                    <div>
                        <div>{label}</div>
                        <div style={{ color: '#0F7AB5' }}>{value}</div>
                    </div>
                    <div>
                        <div>{label2}</div>
                        <div style={{ color: '#F0843A' }}>{value2}</div>
                    </div>
                </div>
            ))}
        </div>
    )
}
export const ImagesAndTexts004 = ({ ModuleItemEvent, data }) => {
    const [StyleArrList] = useState({
        one: [
            { uuid: '1', title: '监理工序', value: '999' },
            { uuid: '2', title: '试验室', value: '999' },
            { uuid: '3', title: '拌合站', value: '999' },
            { uuid: '4', title: '路面施工', value: '999' },
            { uuid: '5', title: '桩基信息', value: '999' },
        ],
        two: [
            { uuid: '1', title: 'Z1', value: '999' },
            { uuid: '2', title: 'Z2', value: '999' },
            { uuid: '3', title: 'Z3', value: '999' },
            { uuid: '4', title: 'A1', value: '999' },
            { uuid: '5', title: 'A2', value: '999' },
            { uuid: '6', title: 'A3', value: '999' },
            { uuid: '7', title: 'B1', value: '999' },
            { uuid: '8', title: 'B2', value: '999' },
            { uuid: '9', title: 'B3', value: '999' },
        ],
    })

    return (
        <div
            className="ImagesAndTexts004"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts004')
            }}
        >
            {StyleArrList[data?.module || 'one'].map(({ uuid, title, value }) => (
                <div className="Box" key={uuid}>
                    <div>{title}</div>
                    <div>{value}</div>
                </div>
            ))}
        </div>
    )
}
export const ImagesAndTexts005 = ({ ModuleItemEvent }) => {
    const [Data] = useState([
        [
            { uuid: '1', title: '培训人数', value: 9999, img: 'kejipeixun', color: '#0F7AB5' },
            { uuid: '2', title: '培训次数', value: 9999, img: 'gongxuxinxibiao', color: '#0F7AB5' },
        ],
        [
            { uuid: '3', title: '总学时', value: 9999, img: 'IconAHoutaiShouyetouzikongjianbeifen9', color: '#43A095' },
            { uuid: '4', title: '培训合格率', value: 9999, img: 'IconAZuobiaoyoushujubeifen4', color: '#43A095' },
        ],
    ])

    return (
        <div
            className="ImagesAndTexts005"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts005')
            }}
        >
            {Data.map((item, index) => (
                <div className="Box" key={index}>
                    {item.map(({ uuid, title, value, img, color }) => (
                        <div className="Item" key={uuid}>
                            <div className="Icon" style={{ background: color }}>
                                {ICON[img]}
                            </div>
                            <div className="Text">
                                <div>{value}</div>
                                <div>{title}</div>
                            </div>
                        </div>
                    ))}
                </div>
            ))}
        </div>
    )
}
export const ImagesAndTexts006 = ({ ModuleItemEvent }) => {
    const [DataOne] = useState([
        { uuid: '1', value: '2', title: '风级' },
        { uuid: '2', value: '西南', title: '风级' },
        { uuid: '3', value: '3', title: '风速', unit: 'm/s' },
    ])

    const [DataTwo] = useState([
        [
            { uuid: '1', title: 'PM2.5', value: '80' },
            { uuid: '2', title: 'PM10', value: '143' },
        ],
        [
            { uuid: '3', title: '温度', value: '23', unit: '℃' },
            { uuid: '4', title: '湿度', value: '143', unit: '%RH' },
        ],
    ])

    return (
        <div
            className="ImagesAndTexts006"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts006')
            }}
        >
            <div className="Top">
                {DataOne.map(({ uuid, title, value, unit }) => (
                    <div key={uuid}>
                        <div>
                            {value}
                            <span>{unit}</span>
                        </div>
                        <div>{title}</div>
                    </div>
                ))}
            </div>
            <div className="Btm">
                {DataTwo.map((item, index) => (
                    <div key={index}>
                        <img
                            src={WeChatImageUrl + `${index === 0 ? 'environment001.png' : 'environment002.png'}`}
                            alt=""
                        />
                        {item.map(({ uuid, title, value, unit }) => (
                            <div className="Text" key={uuid} style={{ color: index === 0 ? '#262626' : '#ffffff' }}>
                                <div>{title}</div>
                                <div>
                                    {value}
                                    <span>{unit}</span>
                                </div>
                            </div>
                        ))}
                    </div>
                ))}
            </div>
        </div>
    )
}
export const ImagesAndTexts007 = ({ ModuleItemEvent }) => {
    const [Data] = useState([
        [
            { uuid: '1', title: '进洞人数', value: '1134' },
            { uuid: '2', title: '出洞人数', value: '1134' },
            { uuid: '3', title: '洞内人数', value: '86' },
        ],
        [
            { uuid: '4', title: '进洞设备', value: '1134' },
            { uuid: '5', title: '出洞设备', value: '1134' },
            { uuid: '6', title: '洞内设备', value: '86' },
        ],
    ])
    return (
        <div
            className="ImagesAndTexts007"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts007')
            }}
        >
            {Data.map((item, index) => (
                <div className="Box" key={index}>
                    {item.map(({ uuid, title, value }) => (
                        <div key={uuid}>
                            <div>{title}</div>
                            <div style={{ color: index === 0 ? '#F0843A' : '#0F7AB5 ' }}>{value}</div>
                        </div>
                    ))}
                </div>
            ))}
        </div>
    )
}
export const ImagesAndTexts008 = ({ ModuleItemEvent, data }) => {
    const [Color] = useState(['#0F7AB5', '#EE601B'])
    const [StyleArrList] = useState({
        one: [
            { uuid: '1', title: '甲烷', value: '0', unit: 'ppm', status: 0 },
            { uuid: '2', title: '硫化氢', value: '0', unit: 'ppm', status: 0 },
            { uuid: '3', title: '氧气', value: '0', unit: 'ppm', status: 0 },
            { uuid: '4', title: '一氧化碳', value: '0', unit: 'ppm', status: 0 },
            { uuid: '5', title: '二氧化碳', value: '0', unit: 'ppm', status: 1 },
        ],
        two: [
            { uuid: '1', title: '钢筋骨架安装', value: '0', unit: '', status: 0 },
            { uuid: '2', title: '混凝土浇筑', value: '0', unit: '', status: 0 },
            { uuid: '3', title: '养生 ', value: '0', unit: '', status: 0 },
            { uuid: '4', title: '张拉', value: '0', unit: '', status: 0 },
            { uuid: '5', title: '压浆', value: '0', unit: '', status: 0 },
            { uuid: '6', title: '空闲', value: '0', unit: '', status: 0 },
        ],
    })

    return (
        <div
            className="ImagesAndTexts008"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts008')
            }}
        >
            {StyleArrList[data?.module || 'one'].map(({ uuid, title, value, unit, status }) => (
                <div className="Box" key={uuid}>
                    <div>{title}</div>
                    <div style={{ color: Color[status] }}>
                        {value}
                        {unit}
                    </div>
                </div>
            ))}
        </div>
    )
}
export const ImagesAndTexts009 = ({ ModuleItemEvent }) => {
    const [Status] = useState({
        0: { background: '#43A095', text: '正常' },
        1: { background: '#EE601B', text: '异常' },
    })
    const [Data] = useState([
        {
            uuid: '1',
            type: 'L-左洞',
            title: '二衬台车',
            status: 0,
            value: '605.43',
            unit: 'm',
            label: '与开挖台车距离',
            color: '#0F7AB5',
        },
        {
            uuid: '2',
            type: 'R-右洞',
            title: '二衬台车',
            status: 1,
            value: '462.70',
            unit: 'm',
            label: '与开挖台车距离',
            color: '#A570B4',
        },
    ])
    return (
        <div
            className="ImagesAndTexts009"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts009')
            }}
        >
            {Data.map(({ uuid, type, title, status, value, unit, label, color }) => (
                <div className="Box" key={uuid}>
                    <div className="Top">
                        <div>
                            <div style={{ color }}>{type}</div>
                            <div>{title}</div>
                        </div>
                        <div style={{ background: Status[status].background }}>{Status[status].text}</div>
                    </div>
                    <div className="Btm">
                        <div style={{ color }}>
                            {value}
                            {unit}
                        </div>
                        <div>{label}</div>
                    </div>
                </div>
            ))}
        </div>
    )
}
export const ImagesAndTexts010 = ({ ModuleItemEvent }) => {
    return (
        <div
            className="ImagesAndTexts010"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts010')
            }}
        >
            {[...new Array(5)].map((_, index) => (
                <div className="Box" key={index}>
                    <div>文件柜 第0{5 - index}期</div>
                    <div>{dayjs().format('YYYY-MM-DD HH:mm:ss')}</div>
                </div>
            ))}
            <div className="Btn"> 查看更多 </div>
        </div>
    )
}
export const ImagesAndTexts011 = ({ ModuleItemEvent }) => {
    const [Data] = useState([
        {
            key: '1',
            label: '拌合站出料量',
            children: [
                { uuid: '1', title: '年出料量', value: '312', unit: '片' },
                { uuid: '2', title: '月出料量', value: '312', unit: '片' },
                { uuid: '3', title: '日出料量', value: '312', unit: '片' },
            ],
        },
        {
            key: '2',
            label: '粱片生产力',
            children: [
                { uuid: '1', title: '年生产能力', value: '312', unit: '片' },
                { uuid: '2', title: '日生产能力', value: '312', unit: '片' },
                { uuid: '3', title: '剩余所需时间', value: '48', unit: '日' },
            ],
        },
    ])
    return (
        <div
            className="ImagesAndTexts011"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts011')
            }}
        >
            {Data.map(({ key, label, children }) => (
                <div className="Box" key={key}>
                    <div>{label}</div>
                    <div className="children">
                        {children.map(({ uuid, title, value, unit }) => (
                            <div key={uuid}>
                                <div>{title}</div>
                                <div>
                                    {value} <span>{unit}</span>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            ))}
        </div>
    )
}
export const ImagesAndTexts012 = ({ ModuleItemEvent, data }) => {
    const { module } = data
    const StyleArrList = {
        one: {
            Label: '梁片需求',
            Title: [
                { uuid: '1', title: '标段名称', flex: 1 },
                { uuid: '2', title: '总数', flex: 1 },
                { uuid: '3', title: '完成', flex: 1 },
                { uuid: '4', title: '百分比', flex: 1 },
            ],
            List: [
                { uuid: '1', Arr: ['鹤岗枢纽互通', '632', '0', '0%'] },
                { uuid: '2', Arr: ['-', '-', '-', '-'] },
            ],
        },
        two: {
            Label: '粱片种类',
            Title: [
                { uuid: '1', title: '名称', flex: 1 },
                { uuid: '2', title: '总数', flex: 1 },
                { uuid: '3', title: '完成', flex: 1 },
                { uuid: '4', title: '百分比', flex: 1 },
            ],
            List: [
                { uuid: '1', Arr: ['30m', '640', '0', '0%'] },
                { uuid: '2', Arr: ['35m', '8', '0', '0%'] },
                { uuid: '3', Arr: ['40m', '20', '0', '0%'] },
            ],
        },
    }

    // const Label = StyleArrList[module].Label
    // const Title = StyleArrList[module].Title
    // const List = StyleArrList[module].List
    const Label = StyleArrList['one'].Label
    const Title = StyleArrList['one'].Title
    const List = StyleArrList['one'].List

    return (
        <div
            className="ImagesAndTexts012"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts012')
            }}
        >
            <div className="Box">
                <div className="Label">{Label}</div>
                <div className="Title">
                    {Title.map(({ uuid, title, flex }) => (
                        <div style={{ flex }} key={uuid}>
                            {title}
                        </div>
                    ))}
                </div>
                <div className="List">
                    {List.map(({ uuid, Arr }) => (
                        <div key={uuid}>
                            {Arr.map((item, index) => (
                                <div key={index} style={{ flex: Title[index].flex }}>
                                    {item}
                                </div>
                            ))}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}
export const ImagesAndTexts013 = ({ ModuleItemEvent }) => {
    const [Data] = useState({ title: '项目党员总数', value: 2344141, img: 'ImagesAndTexts013.png' })
    return (
        <div
            className="ImagesAndTexts013"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts013')
            }}
        >
            <div className="Box">
                <div>{toMoney(Data.value)}</div>
                <div>{Data.title}</div>
            </div>
            <img src={WeChatImageUrl + Data.img} alt="" />
        </div>
    )
}
export const ImagesAndTexts014 = ({ ModuleItemEvent }) => {
    const [Data] = useState(['A1工区党支部', 'A3工区党支部', 'A3工区党支部', 'A3工区党支部', 'A3工区党支部'])
    return (
        <div
            className="ImagesAndTexts014"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('ImagesAndTexts014')
            }}
        >
            {Data.map((item, index) => (
                <div key={index}>{item}</div>
            ))}
        </div>
    )
}

/**
 * !~@ uCharts          UChartsArcBar   进度图例
 */
export const UChartsArcBar001 = ({ ModuleItemEvent, data }) => {
    const StyleArrList = {
        safeOrder: { color: '#0F7AB5', url: 'safeOrder' },
        massOrder: { color: '#43A095', url: 'massOrder' },
    }
    const ChartsBox = useRef()
    const [Data] = useState([
        { uuid: '1', title: '下单数', value: 999 },
        { uuid: '2', title: '已整改', value: 999 },
        { uuid: '3', title: '未整改', value: 999 },
    ])
    const module = data?.module
    const Style = StyleArrList[module]
    useEffect(() => {
        const getServerData = () => {
            const color = Style?.color
            const canvas = ChartsBox.current
            const ctx = canvas.getContext('2d')
            canvas.width = canvas.offsetWidth
            canvas.height = canvas.offsetHeight
            new uCharts({
                type: 'arcbar',
                context: ctx,
                width: canvas.width,
                height: canvas.height,
                series: [{ name: '整改率', color, data: 0.8 }],
                animation: true,
                background: '#FFFFFF',
                color: ['#236EE7'],
                padding: 15,
                title: { name: '80%', fontSize: 30, color },
                subtitle: { name: '整改率', fontSize: 12, color: '#444444' },
                extra: { arcbar: { type: 'circle', startAngle: 1.5, endAngle: 0.25 } },
            })
        }
        if (ChartsBox.current) getServerData()
    }, [ChartsBox, Style?.color])

    return (
        <div
            className="UChartsArcBar001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('UChartsArcBar001')
            }}
        >
            <div className="uCharts">
                <canvas ref={ChartsBox} />
            </div>
            <div className="Box">
                {Data.map(({ uuid, title, value }) => (
                    <div key={uuid}>
                        <div>{title}</div>
                        <div>{value}</div>
                    </div>
                ))}
            </div>
        </div>
    )
}

/**
 * !~@ uCharts          UChartsRing 环形图例
 */
export const UChartsRing001 = ({ ModuleItemEvent, data }) => {
    const ChartsBox = useRef()
    const [Color] = useState(['#F0843A', '#43A095', '#236EE7', '#7C68DB', '#A570B4'])
    const [StyleArrList] = useState({
        personnel: [
            { uuid: '1', labelShow: false, name: '项目办管理人员', value: 9999 },
            { uuid: '2', labelShow: false, name: '监理人员', value: 9999 },
            { uuid: '3', labelShow: false, name: '试验人员', value: 9999 },
            { uuid: '4', labelShow: false, name: '施工管理人员', value: 9999 },
            { uuid: '5', labelShow: false, name: '技术人员', value: 9999 },
        ],
        invest: [
            { uuid: '1', labelShow: false, name: '建安费', value: 9999 },
            { uuid: '2', labelShow: false, name: '征地拆迁费', value: 9999 },
            { uuid: '3', labelShow: false, name: '管理费', value: 9999 },
            { uuid: '4', labelShow: false, name: '预备费', value: 9999 },
            { uuid: '5', labelShow: false, name: '利息', value: 9999 },
        ],
        one: [
            { uuid: '1', labelShow: false, name: '安全预警', value: 9999 },
            { uuid: '2', labelShow: false, name: '实验室超标', value: 9999 },
            { uuid: '3', labelShow: false, name: '拌合站超标', value: 9999 },
        ],
    })

    useEffect(() => {
        const getServerData = () => {
            const canvas = ChartsBox.current
            const ctx = canvas.getContext('2d')
            canvas.width = canvas.offsetWidth
            canvas.height = canvas.offsetHeight

            const title =
                data?.module === 'personnel' ? { name: '2500', fontSize: 30, color: '#444444' } : { show: false }
            const subtitle =
                data?.module === 'personnel' ? { name: '总数', fontSize: 12, color: '#444444' } : { show: false }
            const ringWidth = data?.module === 'personnel' ? 20 : 40

            new uCharts({
                type: 'ring',
                context: ctx,
                width: canvas.width,
                height: canvas.height,
                series: [{ data: StyleArrList[data?.module] }],
                animation: true,
                rotate: false,
                rotateLock: false,
                background: '#FFFFFF',
                color: Color,
                padding: [5, 5, 5, 5],
                dataLabel: true,
                enableScroll: false,
                legend: {
                    show: false,
                },
                title,
                subtitle,
                extra: {
                    ring: {
                        ringWidth,
                        customRadius: 65,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 15,
                    },
                },
            })
        }
        if (ChartsBox.current) getServerData()
    }, [Color, StyleArrList, data?.module])

    return (
        <div
            className="UChartsRing001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('UChartsRing001')
            }}
        >
            <div className="uCharts">
                <canvas ref={ChartsBox} />
            </div>
            <div className="Box">
                {StyleArrList[data?.module].map(({ uuid, name, value }, index) => (
                    <div key={uuid}>
                        <div>{name}</div>
                        <div style={{ color: Color[index] }}>{value}</div>
                    </div>
                ))}
            </div>
        </div>
    )
}

export const UChartsRing002 = ({ ModuleItemEvent, data }) => {
    const ChartsBox = useRef()
    const [Color] = useState(['#F0843A', '#43A095', '#236EE7', '#7C68DB', '#A570B4', '#1677ff'])

    const [StyleArrList] = useState({
        one: [
            { uuid: '1', labelShow: false, name: '隧道有毒气体', value: 9999 },
            { uuid: '2', labelShow: false, name: '室外环境监测', value: 9999 },
            { uuid: '3', labelShow: false, name: '室内有毒气体', value: 9999 },
            { uuid: '4', labelShow: false, name: '试验室数据', value: 9999 },
            { uuid: '5', labelShow: false, name: '安全帽求救', value: 9999 },
        ],
    })

    useEffect(() => {
        const getServerData = () => {
            const canvas = ChartsBox.current
            const ctx = canvas.getContext('2d')
            canvas.width = canvas.offsetWidth
            canvas.height = canvas.offsetHeight

            const title = { name: '2500', fontSize: 30, color: '#444444' }
            const subtitle = { name: '总数', fontSize: 12, color: '#444444' }

            new uCharts({
                type: 'ring',
                context: ctx,
                width: canvas.width,
                height: canvas.height,
                series: [{ data: StyleArrList[data?.module] }],
                animation: true,
                rotate: false,
                rotateLock: false,
                background: '#FFFFFF',
                color: Color,
                padding: [5, 5, 5, 5],
                dataLabel: true,
                enableScroll: false,
                legend: {
                    show: false,
                },
                title,
                subtitle,
                extra: {
                    ring: {
                        ringWidth: 60,
                        customRadius: 130,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 15,
                    },
                },
            })
        }
        if (ChartsBox.current) getServerData()
    }, [Color, StyleArrList, data?.module])

    return (
        <div
            className="UChartsRing002"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('UChartsRing002')
            }}
        >
            <div className="uCharts">
                <canvas ref={ChartsBox} />
            </div>
            <div className="Box">
                {StyleArrList[data?.module].map(({ uuid, name, value }, index) => (
                    <div key={uuid}>
                        <div>{name}</div>
                        <div style={{ color: Color[index] }}>{value}</div>
                    </div>
                ))}
            </div>
        </div>
    )
}

/**
 * !~@ uCharts          UChartsBar   条状图
 */
export const UChartsBar001 = ({ ModuleItemEvent, data }) => {
    const ChartsBox = useRef()
    const OrgSelect = data?.OrgSelect
    useEffect(() => {
        const OneTitle = data?.OneTitle
        const OneColor = data?.OneColor
        const TwoState = data?.TwoState
        const TwoTitle = data?.TwoTitle
        const TwoColor = data?.TwoColor
        const showTitle = data?.showTitle
        const TitleText = data?.TitleText
        const BarType = data.BarType

        const getServerData = () => {
            const canvas = ChartsBox.current
            const ctx = canvas.getContext('2d')
            canvas.width = canvas.offsetWidth
            canvas.height = canvas.offsetHeight
            let series = [{ name: OneTitle, data: [35, 36, 31, 33, 13, 34, 40, 55] }]
            TwoState && (series = [...series, { name: TwoTitle, data: [18, 27, 21, 24, 6, 28, 33, 40] }])
            new uCharts({
                type: 'bar',
                context: ctx,
                width: canvas.width,
                height: canvas.height,
                categories: ['A1', 'A2', 'A3', 'A4', 'B1', 'B2', 'B3', 'B3'],
                series,
                animation: true,
                dataLabel: false,
                background: '#FFFFFF',
                color: [OneColor, TwoColor],
                padding: [15, 30, 15, 15],
                enableScroll: false,
                legend: { position: 'top' },
                xAxis: {
                    min: 0,
                    axisLine: false,
                    gridType: 'dash',
                    disableGrid: false,
                    boundaryGap: 'justify',
                },
                yAxis: {
                    showTitle,
                    data: [
                        {
                            type: 'categories',
                            title: TitleText,
                            titleOffsetY: -8,
                            titleOffsetX: -8,
                            titleFontColor: '#444',
                            titleFontSize: 10,
                        },
                    ],
                },
                extra: { bar: { type: BarType, width: 11, seriesGap: 1 } },
            })
        }
        if (ChartsBox.current) getServerData()
    }, [ChartsBox, data])

    return (
        <div
            className="UChartsBar001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('UChartsBar001')
            }}
        >
            {OrgSelect && (
                <div className="TopTitle">
                    <div>全部标段</div>
                    <CaretDownOutlined />
                </div>
            )}
            <canvas ref={ChartsBox} />
        </div>
    )
}

/**
 * !~@ uCharts          UChartsGauge   仪表盘
 */
export const UChartsGauge001 = ({ ModuleItemEvent }) => {
    const ChartsBox = useRef()
    const [Data] = useState([
        { uuid: '1', title: '噪音较低', color: '#30BF78' },
        { uuid: '3', title: '噪音较大', color: '#FAAD14' },
        { uuid: '2', title: '噪音正常', color: '#A0D911' },
    ])

    useEffect(() => {
        const getServerData = () => {
            const canvas = ChartsBox.current
            const ctx = canvas.getContext('2d')
            canvas.width = canvas.offsetWidth
            canvas.height = canvas.offsetHeight

            new uCharts({
                type: 'gauge',
                context: ctx,
                width: canvas.width,
                height: canvas.height,
                categories: [
                    { value: 0.25, color: '#30BF78' },
                    { value: 0.5, color: '#A0D911' },
                    { value: 0.75, color: '#FAAD14' },
                    { value: 1, color: '#F4664A' },
                ],
                series: [{ name: '完成率', data: 0.2 }],
                animation: true,
                background: '#FFFFFF',
                color: [
                    '#1890FF',
                    '#91CB74',
                    '#FAC858',
                    '#EE6666',
                    '#73C0DE',
                    '#3CA272',
                    '#FC8452',
                    '#9A60B4',
                    '#ea7ccc',
                ],
                padding: undefined,
                title: {
                    name: '噪音正常',
                    fontSize: 14,
                    color: '#444444',
                    offsetY: -15,
                },
                subtitle: {
                    name: '60db',
                    fontSize: 21,
                    color: '#444444',
                    offsetY: 15,
                },
                extra: {
                    gauge: {
                        width: 8,
                        labelColor: '#262626',
                        labelOffset: -50,
                        startAngle: 0.75,
                        endAngle: 0.25,
                        startNumber: 0,
                        endNumber: 200,
                        pointer: {
                            width: 8,
                            color: 'auto',
                        },
                    },
                },
            })
        }
        if (ChartsBox.current) getServerData()
    }, [])

    return (
        <div
            className="UChartsGauge001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('UChartsGauge001')
            }}
        >
            <div className="uCharts">
                <canvas ref={ChartsBox} />
            </div>
            <div className="Box">
                <div>
                    {Data.map(({ uuid, title, color }) => (
                        <div className="list" key={uuid}>
                            <div style={{ background: color }} />
                            <div>{title}</div>
                        </div>
                    ))}
                </div>
                <div>预警阈值:大于100db</div>
            </div>
        </div>
    )
}

/**
 * !~@ camera           SupervisoryControl   视频监控
 */
export const SupervisoryControl001 = ({ ModuleItemEvent }) => {
    // cameraNULL.png
    const title = ['全部标段', '全部位置', '全部类型']
    const [Data] = useState([
        {
            uuid: '1',
            tableName: 'Z1水泥室',
            cameraTypeName: '固定监控',
            cameraPositionName: '水泥室',
            deviceSerial: 'G59862751',
            online: 1,
            captureImageUrl:
                'https://fastdfs-gateway.ys7.com/1/capture/003iSNB10P5zVMUFakZfHLT2f3xEmEJ.jpg?Expires=1680156049&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=JHwyBPvt1%2FfcMqC5kwT1Yf3WNfo%3D',
        },
        {
            uuid: '2',
            tableName: 'Z1力学室',
            cameraTypeName: '固定监控',
            cameraPositionName: '力学室',
            deviceSerial: 'G59862751',
            online: 1,
            captureImageUrl:
                'https://fastdfs-gateway.ys7.com/1/capture/003iSNBZ6Omm1C6pyypQauCgk1UG1Ob.jpg?Expires=1680156066&OSSAccessKeyId=LTAIzI38nEHqg64n&Signature=LJPRLY9nmJ3ShT%2B6rs%2Fz963%2FDUE%3D',
        },
        {
            uuid: '3',
            tableName: 'Z1集料室',
            cameraTypeName: '固定监控',
            cameraPositionName: '集料室',
            deviceSerial: 'G59862751',
            online: 0,
            captureImageUrl: '',
        },
    ])

    return (
        <div
            className="SupervisoryControl001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('SupervisoryControl001')
            }}
        >
            <div className="Options">
                {title.map((item, index) => (
                    <div key={index}>
                        <div>{item}</div>
                        <CaretDownOutlined />
                    </div>
                ))}
            </div>
            <div className="List">
                {Data.map(
                    ({
                        uuid,
                        tableName,
                        cameraTypeName,
                        cameraPositionName,
                        deviceSerial,
                        online,
                        captureImageUrl,
                    }) => (
                        <div key={uuid}>
                            <img src={captureImageUrl || WeChatImageUrl + 'cameraNULL.png'} alt="" />
                            <div className="Content">
                                <div>{tableName}</div>
                                <div>{cameraPositionName}</div>
                                <div>{cameraTypeName}</div>
                                <div>{deviceSerial}</div>
                            </div>
                            <div className="Status" style={{ background: online === 1 ? '#32C696' : '#F4664A' }} />
                        </div>
                    ),
                )}
            </div>
        </div>
    )
}

/**
 * !~@ video           DroneVideo   全景时光机
 */
export const DroneVideo001 = ({ ModuleItemEvent }) => {
    const title = ['年份', '月份', '工区']
    const [Data] = useState([
        {
            uuid: '1',
            title: '鹤岗西互通',
            date: '2023/02',
            number: 1,
            cover: 'LoginBottom.png',
        },
        {
            uuid: '2',
            title: '鹤岗西互通',
            date: '2023/02',
            number: 2,
            cover: 'LoginBottom.png',
        },
    ])
    return (
        <div
            className="DroneVideo001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('DroneVideo001')
            }}
        >
            <div className="Options">
                {title.map((item, index) => (
                    <div key={index}>
                        <div>{item}</div>
                        <CaretDownOutlined />
                    </div>
                ))}
            </div>
            <div className="List">
                {Data.map(({ uuid, title, date, number, cover }) => (
                    <div key={uuid}>
                        <img src={WeChatImageUrl + cover} alt="" />
                        <div className="Content">
                            <div>{title}</div>
                            <div>
                                {date} 第{number}次
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

/**
 * !~@ video           VideoList   全景时光机
 */
export const VideoList001 = ({ ModuleItemEvent }) => {
    const title = ['全部类型']
    const [Data] = useState([
        {
            uuid: '1',
            title: '隧道施工工艺',
            type: '工艺工法',
            cover: 'VideoList001-2.png',
        },
        {
            uuid: '2',
            title: '鹤哈高速鹤岗至伊春段2211',
            type: '宣传片',
            cover: 'VideoList001-1.png',
        },
    ])
    return (
        <div
            className="VideoList001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('VideoList001')
            }}
        >
            <div className="Options">
                {title.map((item, index) => (
                    <div key={index}>
                        <div>{item}</div>
                        <CaretDownOutlined />
                    </div>
                ))}
            </div>
            <div className="List">
                {Data.map(({ uuid, title, type, cover }) => (
                    <div key={uuid}>
                        <img src={WeChatImageUrl + cover} alt="" />
                        <div className="Content">
                            <div>{title}</div>
                            <div>类型: {type}</div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

/**
 * !~@ map           Mars3d   地图列表
 */
export const Mars3d001 = ({ ModuleItemEvent }) => {
    const [Data] = useState([
        { uuid: '1', title: '鹤伊项目地图路线', img: 'LoginBottom.png' },
        { uuid: '2', title: '北漠项目地图路线', img: 'LoginBottom.png' },
    ])
    return (
        <div
            className="Mars3d001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('Mars3d001')
            }}
        >
            {Data.map(({ uuid, title, img }) => (
                <div className="Box" key={uuid}>
                    <img src={WeChatImageUrl + img} alt="" />
                    <div>{title}</div>
                </div>
            ))}
        </div>
    )
}

/**
 * !~@ aps           AutodeskAps   aps
 */
export const AutodeskAps001 = ({ ModuleItemEvent }) => {
    const [Data] = useState([{ uuid: '1', img: 'LoginBottom.png' }])
    return (
        <div
            className="AutodeskAps001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('AutodeskAps001')
            }}
        >
            {Data.map(({ uuid, img }) => (
                <div className="Box" key={uuid}>
                    <img src={WeChatImageUrl + img} alt="" />
                </div>
            ))}
        </div>
    )
}

/**
 * !~@ live  LiveBroadcast   直播列表
 */
export const LiveBroadcast001 = ({ ModuleItemEvent }) => {
    const [Data] = useState([
        {
            uuid: '1',
            title: '大疆无人机XD032',
            img: 'https://heyi.rest.ljkjkf.com/api/static/20230102/6227a044-30c4-4ef3-96f6-c90d8e06ec0c.png',
            date: '00:03:42',
        },
        { uuid: '2', title: '大疆无人机XD033', img: '', date: '00:00:00' },
    ])
    return (
        <div
            className="LiveBroadcast001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('LiveBroadcast001')
            }}
        >
            {Data.map(({ uuid, title, img, date }) => (
                <div className="Box" key={uuid}>
                    {img ? <img src={img} alt="" /> : <div className="Over">直播已经结束 </div>}
                    <div className="Title">
                        <div>{title}</div>
                        <div>{date}</div>
                    </div>
                </div>
            ))}
        </div>
    )
}

/**
 * !~@ Form  FormList 数据表单
 */
export const FormList001 = ({ ModuleItemEvent }) => {
    return (
        <div
            className="FormList001"
            draggable={ModuleItemEvent ? true : false}
            onDragStart={() => {
                if (ModuleItemEvent) ModuleItemEvent.emit('FormList001')
            }}
        >
            <div>
                <div>
                    <div>标题</div>
                    <div>组织机构</div>
                </div>
                <div>
                    <div>流程</div>
                    <div>时间</div>
                </div>
            </div>
        </div>
    )
}

/**
 * TODO 模块配置参数
 * ??? 通用参数
 * * h          元素默认高度
 */

const TitleCommonData = {
    status: true,
    title: '主标题',
    smallTitle: '副标题',
    theme: false,
    option: false,
    options: 'one',
}

export const WeChatModuleDefault = {
    OptionsButton001: { ...TitleCommonData, h: 140, module: 'safeOrder' },

    OptionsSelect001: { ...TitleCommonData, h: 100, module: 'one' },

    ImagesAndTexts001: { ...TitleCommonData, h: 210, module: 'one' },
    ImagesAndTexts002: { ...TitleCommonData, h: 210 },
    ImagesAndTexts003: { ...TitleCommonData, h: 390, module: 'one' },
    ImagesAndTexts004: { ...TitleCommonData, h: 170, module: 'one' },
    ImagesAndTexts005: { ...TitleCommonData, h: 210 },
    ImagesAndTexts006: { ...TitleCommonData, h: 310 },
    ImagesAndTexts007: { ...TitleCommonData, h: 250 },
    ImagesAndTexts008: { ...TitleCommonData, h: 250, module: 'one' },
    ImagesAndTexts009: { ...TitleCommonData, h: 250 },
    ImagesAndTexts010: { ...TitleCommonData, h: 300, module: '', api: 'getInfoTypeManage' },
    ImagesAndTexts011: { ...TitleCommonData, h: 300 },
    ImagesAndTexts012: { ...TitleCommonData, h: 300, module: 'one' },
    ImagesAndTexts013: { ...TitleCommonData, h: 200 },
    ImagesAndTexts014: { ...TitleCommonData, h: 220 },

    UChartsArcBar001: { ...TitleCommonData, h: 170, module: 'safeOrder' },

    UChartsRing001: { ...TitleCommonData, h: 170, module: 'personnel' },
    UChartsRing002: { ...TitleCommonData, h: 600, module: 'one' },

    UChartsBar001: {
        ...TitleCommonData,
        h: 420,
        OneTitle: '下单数',
        OneColor: '#0F7AB5',
        TwoState: true,
        TwoTitle: '完成量',
        TwoColor: '#43A095',
        showTitle: true,
        TitleText: '次数',
        OrgSelect: false,
        apiUrl: 'safeOrder',
        BarType: 'group',
    },

    UChartsGauge001: { ...TitleCommonData, h: 170 },

    SupervisoryControl001: { ...TitleCommonData, h: 500 },

    DroneVideo001: { ...TitleCommonData, h: 500 },

    VideoList001: { ...TitleCommonData, h: 500 },

    Mars3d001: { ...TitleCommonData, h: 500 },

    AutodeskAps001: { ...TitleCommonData, h: 500 },

    LiveBroadcast001: { ...TitleCommonData, h: 500 },

    FormList001: { ...TitleCommonData, h: 500 },
}

// !!! 模块菜单
export const WeChatModuleList = [
    {
        uuid: '1',
        title: '操作按钮',
        content: ['质量下单 & 安全下单'],
        children: ['OptionsButton001'],
    },
    {
        uuid: '2',
        title: '下拉操作',
        content: ['标段选择 & 隧道选择 & 梁场选择 & 环境选择'],
        children: ['OptionsSelect001'],
    },
    {
        uuid: '10',
        title: '图文列表',
        content: [
            '投资概况',
            '梁场概况',
            '隧道概况 & 重点机械 & 隧道进度',
            '质量预警 & 党员统计',
            '安全培训',
            '环境监测',
            '隧道闸门',
            '隧道气体 & 梁状态',
            '安全步距',
            '文件柜',
            '梁场详情',
            '梁片需求 & 梁片种类',
            '党员数量',
            '先进支部',
        ],
        children: [
            'ImagesAndTexts001',
            'ImagesAndTexts002',
            'ImagesAndTexts003',
            'ImagesAndTexts004',
            'ImagesAndTexts005',
            'ImagesAndTexts006',
            'ImagesAndTexts007',
            'ImagesAndTexts008',
            'ImagesAndTexts009',
            'ImagesAndTexts010',
            'ImagesAndTexts011',
            'ImagesAndTexts012',
            'ImagesAndTexts013',
            'ImagesAndTexts014',
        ],
    },
    {
        uuid: '101',
        title: '进度图例',
        content: ['安全进度 & 质量进度'],
        children: ['UChartsArcBar001'],
    },
    {
        uuid: '102',
        title: '环形图例',
        content: ['人员管理 & 预警信息 & 总投资额', '预警信息'],
        children: ['UChartsRing001', 'UChartsRing002'],
    },
    {
        uuid: '103',
        title: '条形图例',
        content: ['安全进度 & 质量进度 & 人员岗位统计 & 监理工序 & 形象进度 & 机械详情 & 试验室 && 人员标段统计'],
        children: ['UChartsBar001'],
    },
    {
        uuid: '104',
        title: '仪表盘',
        content: ['噪音监测'],
        children: ['UChartsGauge001'],
    },
    {
        uuid: '201',
        title: '视频监控',
        children: ['SupervisoryControl001'],
    },
    {
        uuid: '202',
        title: '全景时光机',
        children: ['DroneVideo001'],
    },
    {
        uuid: '203',
        title: '视频列表',
        children: ['VideoList001'],
    },
    {
        uuid: '301',
        title: '火星地图',
        children: ['Mars3d001'],
    },
    {
        uuid: '401',
        title: 'APSModal',
        children: ['AutodeskAps001'],
    },
    {
        uuid: '501',
        title: '直播列表',
        children: ['LiveBroadcast001'],
    },

    {
        uuid: '601',
        title: '数据表单',
        content: ['流程审核'],
        children: ['FormList001'],
    },
]

// !!! 返回的模块列表
export const WeChatModule = {
    OptionsButton001,
    OptionsSelect001,

    ImagesAndTexts001,
    ImagesAndTexts002,
    ImagesAndTexts003,
    ImagesAndTexts004,
    ImagesAndTexts005,
    ImagesAndTexts006,
    ImagesAndTexts007,
    ImagesAndTexts008,
    ImagesAndTexts009,
    ImagesAndTexts010,
    ImagesAndTexts011,
    ImagesAndTexts012,
    ImagesAndTexts013,
    ImagesAndTexts014,

    UChartsArcBar001,

    UChartsRing001,
    UChartsRing002,

    UChartsBar001,

    UChartsGauge001,

    SupervisoryControl001,

    DroneVideo001,

    VideoList001,

    Mars3d001,

    AutodeskAps001,

    LiveBroadcast001,

    FormList001,
}
